<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "云课堂");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style type="text/css">
.swiper-container {
	height: 33%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
}

.type-item img {
	width: 45px;
	height: 45px;
}

.type-item {
	cursor: pointer;
}

.type-item .title {
	font-size: 13px;
	width: 20%;
	margin-left: 0px;
	line-height: 13px;
}

.weui-flex a {
	color: #000;
}

.bakground {
	margin-top: 10px;
	padding:10px 0px;
	
	background-color: #f5f5f5;
	width: 100%;
}

.top {
	border-radius: 5px;
	margin: 0px 8px 10px 8px;
	background-color: white;
	border-bottom: 2px solid #dcdcdc;
}
.top .weui-cells:before{
	border-top: 0px;
}

.top .weui-cells:after {
	border-bottom: none;
}

.top .weui-cells {
	border-radius: 10px;
}

.hot .weui-cell {
	padding: 5px 5px 0px 5px;
	align-items: unset;
}

.top .weui-cell__ft {
	border-left: 1px solid #999999;
	padding-left: 8px;
}

.bottom {
	height: 140px;
	background-image: url('<c:url value='/images/we/shareCode/successShare.png ' />');
	background-size: 100% 100%;
}

#roll {
	height: 22px;
	overflow: hidden;
}

.swiper-pagination-bullet-active {
	background-color: white;
}

.titlehidden {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* 底部栏 */
.weui-tabbar {
	position: fixed !important;
	background-color: #fff;
	padding-top: 5px;
}

.weui-tabbar__icon {
	width: 20px;
	height: 20px;
}

.weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
	color: #1fa0db;
}

	.weui-cell:active{
		background-color: rgba(180, 180, 180, 0.2);
	}
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<%-- <input type="hidden" class="forTab" value="${forTab}" /> --%>

<div class="weui-tab">
	<div class="weui-tab__bd">
<div class="swiper-container">
	<div class="swiper-wrapper">

		<div class="swiper-slide">
			<a href="javascript:void(0);"> <img
				src="<c:url value='/images/we/shareCode/mustStudy.jpg' />" alt="">
			</a>
		</div>

		<div class="swiper-slide">
			<a href="javascript:void(0);"> <img
				src="<c:url value='/images/we/shareCode/mustStudy.jpg' />" alt="">
			</a>
		</div>

		<div class="swiper-slide">
			<a href="javascript:void(0);"> <img
				src="<c:url value='/images/we/shareCode/mustStudy.jpg' />" alt="">
			</a>
		</div>

	</div>
	<div class="swiper-pagination" style="text-align: center;"></div>
</div>

<div style="text-align: center;padding-bottom: 5px">
	<div class="weui-flex" style="margin-top: 0.5rem;">
		<div class="weui-flex__item type-item">
			<a href="<c:url value='/wechat/cust/invitation/posterIndex'/>"> <img alt=""
				src="<c:url value='/images/we/shareCode/marketingTool.jpg' />">
				<div class="title">营销工具</div>
			</a>
		</div>
		<div class="weui-flex__item type-item">
			<a
				href="<c:url value='/wechat/share/information?picture=left&name=productKnowledge'/>">
				<img alt=""
				src="<c:url value='/images/we/shareCode/productKnowledge.jpg' />" />
				<div class="title">产品知识</div>
			</a>
		</div>
		<div class="weui-flex__item type-item">
			<a
				href="<c:url value='/wechat/share/information?picture=right&name=skill'/>">
				<img alt="" src="<c:url value='/images/we/shareCode/skill.jpg' />">
				<div class="title">创客技巧</div>
			</a>
		</div>
		<div class="weui-flex__item type-item">
			<a
				href="<c:url value='/wechat/share/information?picture=right&name=insuranceKnownledge'/>">
				<img alt=""
				src="<c:url value='/images/we/shareCode/insuranceKnownledge.jpg' />">
				<div class="title">保险知识</div>
			</a>
		</div>
		<div class="weui-flex__item type-item">
			<a
				href="<c:url value='/wechat/share/information?picture=right&name=shareInformation'/>">
				<img alt=""
				src="<c:url value='/images/we/shareCode/shareInformation.jpg' />">
				<div class="title">资讯分享</div>
			</a>
		</div>
	</div>
</div>


<div class="bakground">
	<div class="top">
		<div class="weui-cells" style="margin-top: 0px;">
			<a class="weui-cell" href="#">
				<div class="weui-cell__hd">
					<img alt="" src="<c:url value='/images/we/shareCode/notice.jpg' />"
						style="width: 24px; height: 24px">
				</div>
				<div class="weui-cell__bd" id="roll">
				<c:forEach items="${activitys}" var="activity">
					<div style="margin-top: 8px" class="activity" >
					<input type="hidden"  id="activityId" value="${activity.id}" />
					<input type="hidden"  id="actiUrl" value="${activity.actiUrl}" />
						<strong style="color: black">活动</strong> <span
							style="color: #333333; margin-left: 5px; margin-right: 5px;">${activity.name}</span>
						<span style="color: #333333">${activity.reward}元</span>
					</div>
				</c:forEach>
				</div>
				<div class="weui-cell__ft">
					<span id="moreActivety">更多</span>
				</div>
			</a>
		</div>
	</div>

	<c:choose>
		<c:when test="${artical.medioType == 'video'}">
			<a href="<c:url value='/wechat/share/videoDetail?id=${artical.id}'/>">
				<div class="bottom weui-flex">
					<div class="weui-flex__item" style="flex-grow: 2;">
						<h3 style="color: #1fa0db; margin: 10px 10px 0px 10px;">
							成功分享
							</h2>
							<strong>
								<h3 style="color: #555555; margin: 0px 10px;">
									${artical.title}
									</h2>
							</strong>
							<p class="titlehidden" style="padding-left: 50px; color: #666666">${artical.introduction}
							</p>
					</div>

					<div class="weui-flex__item "
						style="flex-grow: 1; position: relative;">
						<img alt="" src="${tfn:getFileUrl(artical.imgUrl)}"
							style="width: 80px; height: 140px; position: absolute; margin-top: -10px; margin-left: 25px">
					</div>
				</div>
			</a>
		</c:when>
		<c:when test="${artical.medioType == 'artical'}">
			<a
				href="<c:url value='/wechat/share/informationDetail?id=${artical.id}'/>">
				<div class="bottom weui-flex">
					<div class="weui-flex__item" style="flex-grow: 2;">
						<h3 style="color: #1fa0db; margin: 10px 10px 0px 10px;">
							成功分享
							</h2>
							<strong>
								<h3 style="color: #555555; margin: 0px 10px;">
									${artical.title}
									</h2>
							</strong>
							<p class="titlehidden" style="padding-left: 50px; color: #666666">${artical.introduction}
							</p>
					</div>

					<div class="weui-flex__item "
						style="flex-grow: 1; position: relative;">
						<img alt="" src="${tfn:getFileUrl(artical.imgUrl)}"
							style="width: 80px; height: 140px; position: absolute; margin-top: -10px; margin-left: 25px">
					</div>
				</div>
			</a>
		</c:when>
	</c:choose>
</div>

<div style="padding: 10px">
	<h3 style="color: #1fa0db;">热门资讯</h3>
</div>

<div class="hot">
	<div class="weui-cells" style="margin-top: 0px;">
		<c:forEach items="${articals}" var="artical" varStatus="i">

			<c:choose>
				<c:when test="${artical.medioType == 'video'}">
					<a class="weui-cell"
						href="<c:url value='/wechat/share/videoDetail?id=${artical.id}'/>">
						<div class="weui-cell__hd" style="margin-top: 0px;">
							<strong style="color: #555555;">【${articalClassifys[i.index].name}】</strong>
							<p style="height: 52px"></p>
						</div>
						<div class="weui-cell__bd">
							<p style="padding: 0px 10px; color: #555555;" class="titlehidden">
								${artical.title}</p>
							<p style="height: 28px"></p>
						</div>
						<div class="weui-cell__ft">
							<img alt="" src="${tfn:getFileUrl(artical.imgUrl)}"
								style="width: 70px; height: 70px;">
						</div>
					</a>
				</c:when>

				<c:when test="${artical.medioType == 'artical'}">
					<a class="weui-cell"
						href="<c:url value='/wechat/share/informationDetail?id=${artical.id}'/>">
						<div class="weui-cell__hd" style="margin-top: 0px;">
							<strong style="color: #555555;">【${articalClassifys[i.index].name}】</strong>
							<p style="height: 52px"></p>
						</div>
						<div class="weui-cell__bd">
							<p style="padding: 0px 10px; color: #555555;" class="titlehidden">
								${artical.title}</p>
							<p style="height: 28px"></p>
						</div>
						<div class="weui-cell__ft">
							<img alt="" src="${tfn:getFileUrl(artical.imgUrl)}"
								style="width: 70px; height: 70px;">
						</div>
					</a>
				</c:when>
			</c:choose>


		</c:forEach>

	</div>
</div>

		<div style="height: 2rem;"></div>
	</div>

	<div class="weui-tabbar">
		<a href="<c:url value='/wechat/home/index' />"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_home1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">首页</p>
		</a> <a href="<c:url value='/wechat/insu/insuranceClassify/showInsu'/>"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_insu0.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">产品</p>
		</a> <a href="<c:url value='/wechat/share/cloudClass'/>"
			class="weui-tabbar__item weui-bar__item--on">
			<div class="weui-tabbar__icon"
				style="height: 15px; margin-bottom: 2px; margin-top: 2px;">
				<img src="<c:url value='/images/we/index/icon_share0.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">创业</p>
		</a> <a href="<c:url value='/wechat/cust/personCenter/index' />"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_per1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">我的</p>
		</a>
	</div>
</div>



<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/swiper.jsp"%>

<script type="text/javascript">
	$(function() {
		$(".swiper-container").swiper({
			pagination : '.swiper-pagination',
			paginationClickable : true,
			autoplay : 4000
		});

		movedown();
		toActivety();
		toActivityDetaile();
	})

	function movedown() {
		var marginTop = 8;
		var stop = false;
		var interval = setInterval(function() {
			if (stop)
				return;
			$('#roll').children('div').first().animate({
				'margin-top' : marginTop--
			}, 8, function() {
				var $first = $(this);
				if (!$first.is(':animated')) {
					if ((-marginTop) > $first.height()) {
						$first.css({
							'margin-top' : 8
						}).appendTo($('#roll'));
						marginTop = 8;
					}
				}
			});
		}, 100);
		/* $('#roll > div').mouseover(function() {
			stop = true;
		}).mouseout(function() {
			stop = false;
		}); */
	}
	
	//去活动页面
	function toActivety(){
		$("#moreActivety").click(function(){
			window.location.href=$.getVirtualPath()+"/wechat/acti/activity";
		})
	}
	
	//去详情页面
	function toActivityDetaile(){
		$(".activity").click(function(){
			var $activity = $(this);
			var activityId = $activity.find("#activityId").val();
			var actiUrl = $activity.find("#actiUrl").val();
			window.location.href=$.getVirtualPath() + "/wechat/acti/" +actiUrl + "?id="+activityId;
		})
	}
</script>


<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>
